<template>
  <div class="wrapper">
    <chart height="100%" width="100%" ref="chart"></chart>
  </div>
</template>

<script>
import Chart from "@/components/chart/Chart.vue";
export default {
  components: { Chart },
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.$refs.chart.showLoading();
    let options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    this.$refs.chart.initChart(options);
    this.$refs.chart.hideLoading();
  },
  activated() {},
  updated() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 800px;
  height: 500px;
  border: 1px solid red;
  margin: 20px auto;
}
</style>
